import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Form, Card, Input, message, Table, Button, Popconfirm, Row, Col, Pagination} from 'antd';
import PageHeaderLayout from "../../layouts/PageHeaderLayout";
import styles from "./MemberList.less";
import MemberEdit from '../../components/MemberEdit';
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);

const FormItem = Form.Item;
@connect(state => ({
    memberList: state.memberList,
}))
@Form.create()
export default class MemberList extends PureComponent {
    state = {
        members: [],
        searchValues: {},
        rankNames: this.props.memberList.rankNames,
    };
    handleSearch = (e) => {
        e.preventDefault();
        const {dispatch, form} = this.props;
        form.validateFields((err, fieldValue) => {
            if (err) return;
            const values = {
                ...fieldValue,
            };
            this.setState({
                searchValues: values,
            });
            dispatch({
                type: 'memberList/queryUserList',
                payload: values,
            });
        });
    };

    componentDidMount() {
        this.props.dispatch({
            type: 'memberList/queryUserList',
        })
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.memberList.userInfo !== undefined) {
            let arr = Object.keys(nextProps.memberList.userInfo).map(key => nextProps.memberList.userInfo[key]);
            this.setState({
                members: arr,
            })
        }
    }

    handleFormReset = () => {
        const {form, dispatch} = this.props;
        form.resetFields();
        this.setState({
            searchValues: {},
        });
        dispatch({
            type: 'memberList/queryUserList',
            payload: {},
        });
    };

    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;
        const {memberList} = this.props;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={8} sm={24}>
                        <FormItem>
                            {getFieldDecorator('nickName')(<Input size="default" placeholder="会员名"/>)
                            }
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
            <span className={styles.sumbitButtons}>
              <AuthButton auth="memberlist.search" type="primary" htmlType="submit" loading={memberList.submitting}>查询</AuthButton>
              <AuthButton auth="menberlist.reset" style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</AuthButton>
            </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    renderForm() {
        return this.renderSimpleForm();
    }

    handleDelete = (e) => {
        const {dispatch} = this.props;
        dispatch({
            type: 'memberList/deleteUser',
            payload: {
                userId: e.user_id,
            },
            callback: (response) => {
                if (response.result == 0) {
                    message.success('删除成功');
                    this.handleDeleteSuccess();

                } else {
                    message.error('删除失败');
                }
            }
        });
    };

    handleDeleteSuccess = () => {
        const {dispatch} = this.props;
        const {searchValues} = this.state;
        const {pagination} = this.props.memberList;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...searchValues,
        };
        dispatch({
            type: 'memberList/queryUserList',
            payload: params,
        });
    };

    handleTableChange = (pagination) => {
        const {dispatch} = this.props;
        const {searchValues} = this.state;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...searchValues,
        };
        dispatch({
            type: 'memberList/queryUserList',
            payload: params,
        });

    };

    columns = () => {
        const columns = [
            {
                title: '会员ID',
                dataIndex: 'user_id',
                key: 'user_id',
            }, {
                title: '会员类型',
                dataIndex: 'user_type',
                key: 'user_type',
            }, {
                title: '会员名',
                dataIndex: 'nick_name',
                key: 'nick_name',
            }, {
                title:'真实姓名',
                dataIndex:'user_name',
                key:'user_name',
            },{
                title: '用户现有资金',
                dataIndex: 'user_money',
                key: 'user_money',
            }, {
                title: '用户冻结资金',
                dataIndex: 'frozen_money',
                key: 'frozen_money',
            }, {
                title: '消费积分',
                dataIndex: 'pay_points',
                key: 'pay_points',
            }, {
                title: '会员等级积分',
                dataIndex: 'rank_points',
                key: 'rank_points',
            }, {
                title: '用户级别',
                dataIndex: 'rank_name',
                key: 'rank_name',
            }, {
                title: '是否生效',
                dataIndex: 'is_validated',
                key: 'is_validated',
            }, {
                title: '操作',
                render: (text, record) => {
                    return (
                        <Button.Group type="ghost">
                            <MemberEdit data={record} searchValues={this.state.searchValues} rankNames={this.state}/>
                            <Popconfirm title="确定删除吗？" onConfirm={() => this.handleDelete(record)}>
                                <AuthButton auth="memberlist.delete" size="small" type="danger">删除</AuthButton>
                            </Popconfirm>
                        </Button.Group>
                    )
                }
            }
        ];
        return columns;
    };

    render() {
        const {pagination} = this.props.memberList;
        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };
        return (
            <PageHeaderLayout title="会员管理">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderForm()}
                        </div>
                        <div>
                            <Table columns={this.columns()}
                                   dataSource={this.state.members}
                                   rowKey={row => row.user_id}
                                   pagination={paginationProps}
                                   onChange={this.handleTableChange}
                            >
                            </Table>
                        </div>
                    </div>
                </Card>
            </PageHeaderLayout>
        )
    }
}
